<template>
  <card class="add-inform add-info-card car-model-999">
    <div class="checkbox-group">
      <a-checkbox v-model="allAppChanged" @change="changeAppStatus($event)" class="item" :indeterminate="appIndeterminate">
        全选APP推送
      </a-checkbox>
      <a-checkbox v-model="allEmailChanged" @change="changeEmailStatus($event)" class="item" :indeterminate="emailIndeterminate">
        全选邮件通知
      </a-checkbox>
    </div>
    <page-form :model="informForm" layout="vertical">
      <div v-for="(item, index) in informForm.staffList" :key="item.id">
        <!-- 接收人列表 -->
        <div class="inform-person-list">
          <h3 class="inform-tip" v-if="index == 0">接收通知人</h3>
          <page-form-item>
            <remote-select
              style="width: 280px"
              v-model="item.staffId"
              placeholder="请选择"
              type="organ_staff_limit"
              :index="index"
              @change="chengeInfoPerson"
            />
          </page-form-item>

          <page-form-item class="form-item">
            <h3 class="receive-tip" v-if="index == 0">接收方式</h3>
            <!-- <a-checkbox-group v-model="item.receiveTypeList" class="radio-group" @change="changeRadio($event, index)">
              <a-checkbox v-for="itemRadio in changeWays" :key="itemRadio.value" :value="itemRadio.value">
                {{ itemRadio.label }}
              </a-checkbox>
            </a-checkbox-group> -->
            <a-checkbox v-model="item.changeApp" @change="changeAppRadio($event, index)"> APP推送 </a-checkbox>
            <a-checkbox v-model="item.changeEmail" @change="changeEmailRadio($event, index)"> 邮件通知 </a-checkbox>
          </page-form-item>
          <page-form-item>
            <div class="del-icon channel-icon" v-if="index !== 0 || informForm.staffList.length > 1" @click="deleteInform(index)">
              <img src="../imgs/del-icon.png" />
              <p>删除</p>
            </div>
            <div class="add-icon channel-icon" v-if="index == informForm.staffList.length - 1" @click="addInformPerson()">
              <img src="../imgs/add-icon.png" />
              <p>新增</p>
            </div>
          </page-form-item>
        </div>
      </div>
    </page-form>
    <page-form-footer :cancelFn="cancelFn" @ok="saveFenceCarModel" />
  </card>
</template>
<script setup>
  import { ref, reactive, onMounted, watch } from 'vue'
  const props = defineProps({
    form: {
      type: Object,
      default: () => {},
    },
  })
  console.log(props.id, props.form, 'props.form.staffList')
  const emit = defineEmits(['cancelBtn', 'submitBtn'])
  const informForm = reactive({
    staffList: null,
  })
  watch(
    () => props.form,
    (val) => {
      if (val) {
        informForm.staffList = JSON.parse(JSON.stringify(val.staffList))
        getCheckDetail()
        getCheckStatus()
      }
    }
  )
  // 初始化数据
  onMounted(() => {
    const data = props.form.staffList || [
      {
        receiveTypeList: [],
        changeApp: false,
        changeEmail: false,
        staffName: null,
        staffId: null,
      },
    ]
    informForm.staffList = JSON.parse(JSON.stringify(data))
    getCheckDetail()
    getCheckStatus()
  })
  // const allChooseState = ref([])
  // const allStatus = ref([
  //   { id: 1, value: 1, label: '全选APP推送', indeterminate: false },
  //   { id: 2, value: 2, label: '全选邮件通知', indeterminate: false },
  // ])
  // app和email半选和全选
  const appIndeterminate = ref(false)
  const emailIndeterminate = ref(false)
  const allAppChanged = ref(false)
  const allEmailChanged = ref(false)

  // 全选APP推送操作
  const changeAppStatus = (val) => {
    appIndeterminate.value = false
    allAppChanged.value = val
    let informList = informForm.staffList
    informList.map((item) => (item.changeApp = val))
  }
  // 全选邮件通知操作
  const changeEmailStatus = (val) => {
    emailIndeterminate.value = false
    allEmailChanged.value = val
    let informList = informForm.staffList
    informList.map((item) => (item.changeEmail = val))
  }

  // 回显详情选择参数
  const getCheckDetail = () => {
    let informList = informForm.staffList
    informList.forEach((i) => {
      if (i.receiveTypeList.some((n) => n == 1)) {
        i.changeApp = true
      }
      if (i.receiveTypeList.some((n) => n == 2)) {
        i.changeEmail = true
      }
    })
  }
  // 根据单选状态选择显示全选状态
  const getCheckStatus = () => {
    let informList = informForm.staffList
    let checkAppList = informList.map((item) => item.changeApp)
    let checkEmailList = informList.map((item) => item.changeEmail)

    if (checkAppList.every((n) => n == true)) {
      appIndeterminate.value = false
      allAppChanged.value = true
    } else if (checkAppList.every((n) => n == false)) {
      appIndeterminate.value = false
      allAppChanged.value = false
    } else {
      appIndeterminate.value = true
    }
    if (checkEmailList.every((n) => n == true)) {
      emailIndeterminate.value = false
      allEmailChanged.value = true
    } else if (checkEmailList.every((n) => n == false)) {
      emailIndeterminate.value = false
      allEmailChanged.value = false
    } else {
      emailIndeterminate.value = true
    }
  }
  // const changeStatus = (value) => {
  //   console.log(value)
  //   let informList = informForm.staffList
  //   allStatus.value.map((item) => (item.indeterminate = false))
  //   if (value) {
  //     informList.map((item) => (item.receiveTypeList = value))
  //   } else {
  //     data.value = []
  //   }
  // }
  //选择App接收方式
  const changeAppRadio = (e, i) => {
    let informList = informForm.staffList
    informList[i].changeApp = e
    getCheckStatus()
  }
  // 选择Email接收方式
  const changeEmailRadio = (e, i) => {
    let informList = informForm.staffList
    informList[i].changeEmail = e
    getCheckStatus()
  }
  // 返回
  const cancelFn = () => {
    emit('cancelBtn')
  }
  // 删除
  const deleteInform = (index) => {
    const formList = informForm.staffList
    formList.splice(index, 1)
    getCheckStatus()
  }
  // 下拉选择
  const chengeInfoPerson = (val, option = {}, index) => {
    console.log(val, option, 'option')
    const changedVal = informForm.staffList[index]
    changedVal.staffId = val
  }

  // 新增通知人
  const addInformPerson = () => {
    informForm.staffList.push({
      receiveTypeList: [],
      changeApp: false,
      changeEmail: false,
      staffName: null,
      staffId: null,
    })
    getCheckStatus()
  }

  // 保存接收人信息
  const saveFenceCarModel = () => {
    let informList = informForm.staffList
    informList.forEach((i) => {
      if (i.changeApp) {
        i.receiveTypeList.push(1)
      }
      if (i.changeEmail) {
        i.receiveTypeList.push(2)
      }
      i.receiveTypeList = [...new Set(i.receiveTypeList)]
    })
    let filterInfoList = informList.map((i) => {
      return {
        receiveTypeList: Array.from(i.receiveTypeList),
        staffId: i.staffId.toString(),
      }
    })
    emit('submitBtn', filterInfoList)
  }
</script>
<style lang="less" scoped>
  .add-inform {
    position: relative;
    .checkbox-group {
      transform: translateY(-50px);
      margin: 15px 0;
      .item {
        margin-right: 20px;
      }
    }
    .receive-tip {
      position: absolute;
      top: 70px;
      color: #1d2129;
      font-weight: 400;
      font-size: 14px;
      margin-left: 5px;
      line-height: 22px;
    }
    .inform-tip {
      position: absolute;
      top: 65px;
      color: #1d2129;
      font-weight: 400;
      font-size: 14px;
      line-height: 22px;
    }
    .inform-person-list {
      box-sizing: border-box;
      display: flex !important;
      margin-bottom: 10px;
      .city-box {
        margin-left: 20px;
      }
    }
    .channel-icon {
      display: flex;
      align-items: center;
      margin-right: 24px;
      cursor: pointer;
      img {
        margin-right: 8px;
        width: 16px;
        height: 16px;
      }
    }
    .del-icon {
      color: #ea0000;
    }
    .add-icon {
      color: #165dff;
    }
  }

  .radio-group {
    position: relative;
    flex: none;
  }
</style>
